<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE html>
<html lang="en">
<head>
<base href="<%=basePath%>">
    <meta charset="UTF-8">
    <title>超市后台</title>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/css/bootstrap.min.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/css/main.css">
    <script src="${pageContext.request.contextPath}/js/jquery.min.js"></script>
<script src="${pageContext.request.contextPath}/js/bootstrap.min.js"></script>
<script src="${pageContext.request.contextPath}/js/main.js"></script>
<script src="http://cdn.bootcss.com/angular.js/1.4.5/angular.min.js"></script>
</head>
<body>
<%@ include file="header.jsp" %>
<%@ include file="left.jsp" %>
<div id="index" style="position: absolute;left: 180px;top: 80px;bottom: 0;right: 0;">
     <section id="main"> 
        <div class="scrollbar1-1" id="style1-1">
        <div class="main_div">
            <div class="main_title">
                <span>超市仓库</span>
            </div>
            <div class="blank"></div>
            <div class="row">
                <div class="col-lg-2 col-md-2 col-sm-2">
                    <div class="input-group">
                        <span class="input-group-btn">
                                <button class="btn btn-default" type="button">商品名称</button>
                        </span>
                        <input type="text" class="form-control" placeholder="商品名称">
                    </div><!-- /input-group -->
                </div><!-- /.col-lg-6 -->
                <div class="col-lg-2 col-md-2 col-sm-2">
                    <div class="input-group">
                        <span class="input-group-btn">
                                <button class="btn btn-default" type="button">商品条码</button>
                        </span>
                        <input type="text" class="form-control" placeholder="商品条码">

                    </div><!-- /input-group -->
                </div><!-- /.col-lg-6 -->
                <label for="inputEmail1" class="col-xs-1 control-label">商品分类</label>
                    <div class="col-xs-1">
                        <select id="selectType1" class="col-xs-12" onclick="change1(this.value,'#selectType2','#selectType3');">
                              
                        </select>
                    </div>
                   <div class="col-xs-1">
                        <select id="selectType2" class="col-xs-12" onclick="change2(this.value,'#selectType3');">
                        </select>
                    </div>
                    <div class="col-xs-1">
                        <select id="selectType3" class="col-xs-12">
                        </select>
                    </div>
                </div>
                <div class="form-group" style="line-height: 40px">
                    <label  class="col-xs-1 control-label" style="text-align: right">是否上架</label>
                    <div class="col-xs-1" style="margin-top: 6px">
                        <select class="col-xs-12">
                            <option>已上架</option>
                            <option>未上架</option>
                        </select>
                    </div>
                    <label  class="col-xs-1 control-label" style="text-align: right">是否推荐</label>
                    <div class="col-xs-1" style="margin-top: 6px">
                        <select class="col-xs-12">
                            <option>已推荐</option>
                            <option>未推荐</option>
                        </select>
                    </div>
                    <div class="col-xs-1">
                        <button class="btn btn-primary col-xs-12">查询</button>
                    </div>
                </div>

            </div><!-- /.row -->
        </div>


        <div class="force-overflow1-1">
                <div class="chaoshi_title">
                    <ul>
                        <li>序号</li>
                        <li>缩略图</li>
                        <li>商品名称</li>
                        <li>商品条码</li>
                        <li>参考价格</li>
                        <li>促销价格</li>
                        <li>上下架</li>
                        <li>推荐</li>
                        <li>库存</li>
                        <li>修改</li>
                        <li>删除</li>
                    </ul>
                </div>
                <div class="chaoshi_commodity">
                    <ul name="0">
                        <li>1</li>
                        <li><img src="" alt="ç¼©ç¥å¾" style="width: 60px;height: 60px;float: left"></li>
                        <li>çæºª</li>
                        <li>56564646454646</li>
                        <li>ï¿¥22</li>
                        <li>ï¿¥22</li>
                        <li>ï¿¥22</li>
                        <li><span>å·²ä¸æ¶</span></li>
                        <li><span>å·²æ¨è</span></li>
                        <li>984ä»¶</li>
                        <li><button >ä¿®æ¹</button> &nbsp;<button>å é¤</button></li>
                    </ul>
              </div>
        </div>

     </section>
</div>


<script>
    function changePage(id1){
       var paths="${pageContext.request.contextPath}/YMGback/super/"+id1;
        $("#index").load(paths);
    }
    function slideToggle(id2) {
        $(id2).slideToggle(200);
    }
</script>
<div id="bg_box">
    <div id="box">
        <div class="box_header textYellow" >
            <span>详细资料</span>
        </div>
        <div class="box_content" >
            <div class="blank"></div>
            <form class="form-horizontal" >
                <div class="form-group">
                    <label  class="col-xs-4 control-label">商品名称</label>
                    <div class="col-xs-6">
                        <input type="text" class="form-control"  placeholder="商品名称">
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-xs-4 control-label">零售价</label>
                    <div class="col-xs-6">
                        <input type="text" class="form-control"  placeholder="零售价">
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-xs-4 control-label">会员价</label>
                    <div class="col-xs-6">
                        <input type="text" class="form-control"  placeholder="会员价">
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-xs-4 control-label">促销价</label>
                    <div class="col-xs-6">
                        <input type="text" class="form-control"  placeholder="促销价">
                    </div>
                </div>
                <div class="form-group">
                    <label  class="col-xs-4 control-label">商品数量</label>
                    <div class="col-xs-6">
                        <input type="text" class="form-control"  placeholder="商品数量">
                    </div>
                </div>
            </form>
        </div>
        <div class="box_footer">
            <ul>
                <li>关闭</li>
                <li>提交</li>
            </ul>
        </div>
    </div>
</div>
<div id="notice_box">
    <div class="notice_title">
        <span>是否删除</span>
    </div>
    <div class="notice_button">
        <ul>
            <li><button class="btn btn-danger">是</button></li>
            <li><button class="btn btn-primary">否</button></li>
        </ul>
    </div>
</div>
</body>
</html>
<script type="text/javascript">
    $(function () {
    initGoodsType();
        var delID;
        $(".chaoshi_commodity>ul>li>button:first-child").click(function () {
            $("#bg_box").css("visibility","visible");
        });
        $(".chaoshi_commodity>ul>li>button:last-child").click(function () {
            $("#notice_box").css("visibility","visible");
            delID=$(this).parents("ul").attr("name");
            return delID;
        });
        $(".box_footer>ul>li:first-child").click(function () {
            $("#bg_box").css("visibility","hidden");
            return false;
        });
        $(".box_footer>ul>li:last-child").click(function () {
            $("#bg_box").css("visibility","hidden");
        });
        $(".notice_button>ul>li:first-child").click(function () {
            $("#notice_box").css("visibility","hidden");
            $(".chaoshi_commodity").eq(delID).css("display","none");
        });
        $(".notice_button>ul>li:last-child").click(function () {
            $("#notice_box").css("visibility","hidden");
            return false;
        });
        
        
    });
      function initGoodsType(){
      //数据库加载商品分类
        $.post("superMarketAction/getGoodsType",
                function(data){//data 为list
                     //循环list 取其属性值
	                $.each(data,function(n,GoodsType) {
	                $("#selectType1").append("<option value="+(n+1)+">"+GoodsType.goodsName+"</option>");  
	                });
	                change1(1,"#selectType2","#selectType3")
                }
        ); 
    }   
       //1级分类选择
       function change1(typeID,select2,select3){
          $.post("superMarketAction/getGoodsType2",
                {
                  typeID:typeID
                },
                function(data){//data 为list
                $(select2).empty();
                $(select3).empty();
                var ids=0;
                     //循环list 取其属性值
	                $.each(data,function(n,GoodsType) {
	                   if(n==0){
	                     ids=GoodsType.id;
	                   }
	                $(select2).append("<option value="+GoodsType.id+">"+GoodsType.goodsName+"</option>"); 
	                });
	                change2(ids,select3);  
                });   
                
       }
       //2级分类选择
       function change2(typeID,select3){
          $.post("superMarketAction/getGoodsType2",
                {
                  typeID:typeID
                },
                function(data){//data 为list
                $(select3).empty();
                     //循环list 取其属性值
	                $.each(data,function(n,GoodsType) {
	                $(select3).append("<option value="+GoodsType.id+">"+GoodsType.goodsName+"</option>"); 
	                })
                });   
       }
</script>